<script lang="ts" setup>
import { ref, reactive } from "vue";
import {goAnctManagement,getRouteParams} from "../../tools/go"
import { getUserId } from "../../store"
import UniPopupMessage from "../../uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue";
import {addAnnouncement,putAnnouncement,publicAnnouncement,getAnnouncement} from "../../api/announcement"


const messagePopup = ref();
const messageType = ref("error");
const messageContent = ref("");
const isSaving = ref(false);
let routeParams = getRouteParams("id");


const statusOptions = ["不启用", "启用", "发布", "未发布"];
const statusIndex = ref(3);
const statusMap = {
  不启用: 0,
  启用: 1,
  发布: 2,
  未发布: 3,
};

const formData = reactive({
  annTitle: "",
  annContent: "",
  annContect: "",
  updateBy: getUserId(),
});

const handleBack = () => {
  goAnctManagement()
};



const showMessage = (type: "success" | "error", content: string) => {
  messageType.value = type;
  messageContent.value = content;
  messagePopup.value.open();
};

const validateForm = () => {
  if (!formData.annTitle) {
    showMessage("error", "请输入公告标题");
    return false;
  }
  if (!formData.annContent) {
    showMessage("error", "请输入公告内容");
    return false;
  }
  if (!formData.annContect) {
    showMessage("error", "请输入联系电话");
    return false;
  }
  if (!/^1\d{10}$/.test(formData.annContect)) {
    showMessage("error", "请输入正确的手机号码");
    return false;
  }
  return true;
};

const handleSave = async () => {
  if (!validateForm()) return;

  isSaving.value = true;
  try {
    // 模拟保存操作
    if (routeParams === null) {
      addAnnouncement(formData).then(res => {
        if (res["code"] === 200) {
          handleBack()
        }
      })
    } else {
      formData["status"] = statusIndex.value
      putAnnouncement(formData).then(res => {
        if (res["code"] === 200) {
          handleBack()
        }
      })
    }


  } catch (error) {
    showMessage("error", "保存失败，请重试");
  } finally {
    isSaving.value = false;
  }
};

const handSubmit = () => {
  if (routeParams === null) {
    addAnnouncement(formData).then(res => {
      if (res["code"] === 200) {
        formData["id"] = res["data"]["id"]
        publicAnnouncement(formData).then(res => {
          if (res["code"] === 200) {
            handleBack()
          }
        })
      }
    })
  } else {
    console.log(formData)
    formData["status"] = statusIndex.value
    publicAnnouncement(formData).then(res => {
      if (res["code"] === 200) {
        handleBack()
      }
    })
  }



};

const init = () => {

  if (routeParams !== null) {
    getAnnouncement(routeParams).then(res => {
      console.log(res)
      if (res["code"] === 200) {
        formData["id"] = res["data"]["id"]
        formData["annTitle"] = res["data"]["title"]
        formData["annContent"] = res["data"]["content"]
        formData["annContect"] = res["data"]["contect"]
        formData["updateTime"] = res["data"]["updateTime"]
        statusIndex.value = res["data"]["status"]
      }
    })
  }


}


const handSelect = (index) => {
  statusIndex.value = index.detail.value;
}


init()

</script>


<template>
  <view class="back">


  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left">
        <v-icon @click="handleBack()" class="icon" icon="mdi-chevron-left"></v-icon>
      </view>
      <view class="nav-title">新增公告</view>
      <view class="nav-right">
        <text size="mini" @click="handSubmit">发布</text>
      </view>
    </view>

    <!-- 表单区域 -->
    <scroll-view class="form-container" scroll-y>
      <view class="form-item">
        <text class="label required">公告标题</text>
        <input
            class="input"
            v-model="formData.annTitle"
            placeholder="请输入公告标题"
            maxlength="50"
        />
      </view>



      <view class="form-item">
        <text class="label required">公告内容</text>
        <textarea
            class="textarea"
            v-model="formData.annContent"
            placeholder="请输入公告内容"
            maxlength="-1"
            height="70"

        />
      </view>

      <view class="form-item">
        <text class="label required">联系电话</text>
        <input
            class="input"
            v-model="formData.annContect"
            placeholder="请输入联系电话"
            type="number"
            maxlength="11"
        />
      </view>

      <view class="form-item">
        <text class="label required">状态</text>
        <picker
            :value="statusIndex"
            :range="statusOptions"
            class="picker"
            @change="handSelect"
        >
          <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label required">公告作者</text>
        <input
            class="input"
            v-model="formData.annAuthor"
            placeholder="请输入作者姓名"
            maxlength="20"
            disabled
        />
      </view>

      <view class="form-item">
        <text class="label required">公告发布时间</text>
        <picker
            mode="date"
            :value="formData.annTime"
            class="picker"
            disabled
        >
          <view class="picker-text">{{ formData.annTime || '请选择发布时间' }}</view>
        </picker>
      </view>



      <view class="form-item readonly">
        <text class="label">上传者</text>
        <view class="readonly-text">{{ formData.update_by }}</view>
      </view>

      <view class="form-item readonly">
        <text class="label">上传时间</text>
        <view class="readonly-text">{{ formData.update_time }}</view>
      </view>
    </scroll-view>

    <!-- 提示弹窗 -->
    <uni-popup ref="messagePopup" type="message">
      <uni-popup-message :type="messageType" :message="messageContent" />
    </uni-popup>

    <view class="button-container">
      <button type="primary" @click="handleSave" >保存</button>
    </view>
  </view>
  </view>
</template>



<style lang="scss" scoped>
@use "../../static/css/main";



/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.back {
  @include main.useTheme() {

    .button-container{
      width: 90%;
      margin: 0rpx auto;
    }

    page {
      min-height: 100vh;
      background-color: main.getVal("primary_bg_color");
    }

    .container {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-bottom: 100rpx;
      background-color: main.getVal("one_lv_bg_color");
    }

    .nav-bar {
      display: flex;
      align-items: center;
      height: 88rpx;
      background-color: main.getVal("two_lv_bg_color");
      box-shadow: 0 2px 4px rgba(main.getVal("primary_text_color"), 0.05);
      padding: 0 30rpx;
    }

    .nav-left {
      .icon{
          color: main.getVal("primary_text_color");
      }
      width: 100rpx;
    }

    .nav-title {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: main.getVal("primary_text_color");
    }

    .nav-right {
      width: 100rpx;
      display: flex;
      justify-content: flex-end;
    }

    .form-container {
      flex: 1;
      overflow: auto;
      padding: 30rpx;
    }

    .form-item {
      background-color: main.getVal("two_lv_bg_color");
      border: 1px solid main.getVal("primary_border_color");
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
    }

    .label {
      display: block;
      font-size: 14px;
      color: main.getVal("one_lv_text_color");
      margin-bottom: 20rpx;
    }

    .required::before {
      content: "*";
      color: #ff4d4f;
      margin-right: 4rpx;
    }

    .input,
    .textarea {
      border-color: main.getVal("one_lv_border_color");
      color: main.getVal("primary_text_color");
      background-color: main.getVal("one_lv_bg_color");
    }
    .input {
      width: 100%;
      height: 80rpx;
      border: 1px solid #e5e5e5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 14px;
    }

    .textarea {
      width: 100%;
      height: 200rpx;
      border: 1px solid #e5e5e5;
      border-radius: 8rpx;
      padding: 20rpx;
      font-size: 14px;
    }

    .picker {
      width: 100%;
      height: 80rpx;
      border: 1px solid #e5e5e5;
      border-radius: 8rpx;
    }

    .picker-text {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 20rpx;
      font-size: 14px;
      color: main.getVal("two_lv_text_color");
    }

    .readonly {
      background-color: main.getVal("primary_bg_color");
    }

    .readonly-text {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 20rpx;
      font-size: 14px;
      color: main.getVal("other_lv_text_color");
    }
    .uni-button--primary {
      background-color: main.getVal("pri_color") !important;
      border-color: main.getVal("pri_color") !important;
    }
  }}
</style>
